<template>
  <view class="page-container">
      <view class="xsm-share-top-bg">
        <image src="/static/share_top_bg.png"></image>
      </view>

      <view class="xsm-share-yqbtn" @click="showQrCode">
        <image src="/static/invite_button.png">{{inviteintro.title}}</image>
      </view>

      <view class="xsm-share-zysx">
        <image src="/static/invite_attention.png"></image>
        <text>{{inviteintro.description}}</text>
        <image src="/static/invite_attention.png"></image>
      </view>

      <view class="xsm-share-zyxsnr">
		  <rich-text :nodes="inviteintro.content"></rich-text>
      </view>

      <view class="xsm-share-tgmbox" v-show="postShow" @longpress="handleLongPress">
        <view class="xsm-share-tgmimg">
          <text class="main-bg-color" >长按保存图片</text>
          <image :src="posterUrl" style="height: 100%;display: contents;" class="ewmimg" mode="aspectFit"></image>
        </view>
        <view class="xsm-share-tgmbtn" @click="hidePoster">取消</view>
      </view>
  </view>
</template>
<script setup>
	import { ref,reactive } from "vue"
	import { getQrcode } from "@/api/member.js"
	import { getSysIntroByMark } from "@/api/sysIntro.js"
	const inviteintro = reactive({
		title:"",
		id:0,
		content:'',
		cover:'',
		description:''
	})

	const getSysIntro = async()=>{
			await getSysIntroByMark({"mark":"invite"}).then(result=>{
				console.log(result);
				Object.assign(inviteintro, result.find(item => item.mark === 'invite'));

			});
	}
	getSysIntro();
	//
	const postShow = ref(false)
	const posterUrl = ref('')

	const getQrcodeImg = async ()=>{
		let res = await getQrcode().then(result=>{
			console.log(result);
			posterUrl.value=result;
			console.log("getQrcode"+result)
		})
	}
	getQrcodeImg();
	const goBack=() =>{
		  uni.navigateBack();
	}

	const hidePoster=()=> {
		  // 隐藏海报逻辑
		  postShow.value=false
	}

	const showQrCode = ()=>{
		if(!posterUrl){

		}else{
			postShow.value=true
		}
	}

	const handleLongPress = async ()=>{
		// uni.showLoading({ title: '下载中...', mask: true });

		try {
		        // 步骤1：下载文件到临时路径
		        const downloadRes = await uni.downloadFile({
		          url: posterUrl.value
		        });
		        // if (downloadRes.statusCode !== 200) throw new Error('下载失败');

		        // // 步骤2：保存到相册
		        // await uni.saveImageToPhotosAlbum({
		        //   filePath: downloadRes.tempFilePath
		        // });
				await wx.showShareImageMenu({
					path: downloadRes.tempFilePath,//转为本地地址showShareImageMenu进行分享
					success: (res) => {
						console.log("showShareImageMenu");
					},
					fail: (err) => {
						console.log("showShareImageMenu err");
					},
				});

		        // uni.hideLoading();
		        // uni.showToast({ title: '保存成功', icon: 'success' });
		    } catch (error) {
		        // uni.hideLoading();
				
				uni.showToast({ title: error, icon: 'error' });
			}

	}

</script>
<style scoped>
.page-container{
  background-color: #fd7621;
}
.xsm-header {
  width: 100%;
  height: 88rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  position: relative;
  background: #faca2a;
}

.xsm-header image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 24rpx;
  left: 20rpx;
}

.xsm-header text {
  font-size: 32rpx;
  line-height: 88rpx;
  text-align: center;
  color: #040404;
  margin-left: 20rpx;
}

.xsm-share-create {
  padding: 10%;
  text-align: center;
}

.xsm-share-top-bg image {
  width: 100%;
  height: 520rpx;
}

.xsm-share-yqbtn image {
  width: 100%;
  height: 100rpx;
}

.xsm-share-zysx {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.xsm-share-zysx image {
  width: 44rpx;
  height: 44rpx;
  margin-top: 0;
}

.xsm-share-zysx text {
  font-size: 28rpx;
  margin: 0 20rpx;
}

.xsm-share-zyxsnr {
  width: 92%;
  padding: 20rpx;
  margin: 20rpx 4% 40rpx;
  background: #fa4f3b;
  border-radius: 10rpx;
}

.xsm-share-zyxsnr text {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  color: #fff;
  display: block;
}

.xsm-share-tgmbox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 111;

}

.xsm-share-tgmimg {
  width: 92%;
  height: 80%;
  margin-top: -20%;
  position: absolute;
  bottom: 130rpx;
  left: 4%;
  border-radius: 10rpx;
}

.xsm-share-tgmimg text {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 28rpx;
  color: #fff;
  line-height: 50rpx;
  width: 180rpx;
  height: 50rpx;
  text-align: center;
  border-radius: 10rpx 0 0 10rpx;
  background-color: #4a83f5;
  padding: 20rpx 30rpx;
}

.xsm-share-tgmimg image {
  border-radius: 10rpx;
}

.xsm-share-tgmbtn {
  width: 92%;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background: #fff;
  border-radius: 10rpx;
  position: absolute;
  bottom: 40rpx;
  left: 4%;
}
.xsm-share-yqbtn image {
    height: 6rem;
    display: block;
    margin: 0 auto;
}
.xsm-share-zysx p {
    display: inline-block;
    height: 2.5rem;
    color: #fff;
    line-height: 2.5rem;
}
.xsm-share-zyxsnr {
    width: 92%;
    padding: 1rem;
    box-sizing: border-box;
    background: #fa4f3b;
    border-radius: 0.5rem;
    margin: 1rem 4% 2rem;
}

.xsm-share-create{
		padding: 5%;
		text-align:center
}
.xsm-share-zysx{
	color: #fff;
}
.top-placeholder {
  width: 40rpx;
}
.xsm-share-zyxsnr text{
  background: none;
}
</style>
